<template>
  <div class="rankdo">
    <h1>办结率排名</h1>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="按地市统计" name="first" style="color: white; font-size:30px">
        <one ref="one" :year="year" @openOrder="handleOpenOrder"></one>
      </el-tab-pane>
      <el-tab-pane label="按事项分类统计" name="second">
        <two ref="two" :rateScrollList="rateScrollList" :year="year" :tagIdProp="tagId"  @openOrder="handleOpenOrder"></two>
      </el-tab-pane>
      <!--            <el-tab-pane label="按调研服务小组统计" name="third" >-->
      <!--                <three ref="three" :rateScrollList="rateScrollList" :year="year"></three>-->
      <!--            </el-tab-pane>-->
    </el-tabs>
  </div>
</template>
<script>
import one from "../one/index.vue";
import two from "../two/index.vue";
import three from "../three/index.vue";

export default {
  components: {
    one,
    two,
    three,
  },
  emits:['openOrder'],
  props: {
    year: {
      type: String,
      default: null
    },
    tagId:{
      type: String,
      default: null
    }
  },

  data() {
    return {
      activeName: 'second',
      rateScrollList: [],
    };
  },
  methods: {
    handleClick(tab, event) {
    },
    getbanjieList() {

    },
    handleOpenOrder(e) {
      this.$emit('openOrder',e)
    }
  },
  mounted() {
    this.getbanjieList();
  }

}
</script>
<style lang="scss" scoped>

@import '../../common/common.css';

.rankdo {
  width: 100%;
  height: 100%;

  h1 {
    margin-top: 1rem;
    color: white;
    font-size: 3rem;
    text-align: center;
  }

  .conten {
    color: red;
  }

}

</style>
